<template>
  <div class="footer">
    <ul>
      <router-link to="/home" tag="li">
        <span class="iconfont icon-shouyefill"></span>
        <p>首页</p>
      </router-link>
      <router-link to="/kind" tag="li">
        <span class="iconfont icon-fenleiorguangchangorqitatianchong"></span>
        <p>分类</p>
      </router-link>
      <router-link to="/cart" tag="li" >
        <span class="iconfont icon-gouwucheman"></span>
        <p>购物车</p>
      </router-link>
      <router-link to="/me" tag="li" v-if="flag">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
      </router-link>
      <router-link to="/login" tag="li" v-else>
        <span class="iconfont icon-wode"></span>
        <p>未登录</p>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    flag() {
      if (!localStorage.getItem("token")) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style>
.footer ul li {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.footer ul li span {
  color: coral;
  font-size: 20px;
}
.router-link-active {
  color: rgb(233, 21, 21);
  font-weight: 600;
}
</style>